<template>
	<view class="service uu-service-top">
		<view class="header">
			<view class="name">Hello ～ </view>
			<view class="problem">请选择需要咨询的问题&联系客服</view>
		</view>
		<view class="help-center"> 
			<view class="top">
				<view class="writing">帮助中心</view>
				<!-- <view class="more">查看全部<text class="iconfont icon-xiangyou"></text></view> -->
			</view>
			<view class="list">
				<view class="item" @click="goProblemList(1)">
					<view class="item-left">
						<view class="pic">
							<image v-if="appType == 0" src="../../static/images/ic-problem1.png"></image>
							<image v-else-if="appType == 1" src="../../static/images/ic-problem11.png"></image>
							<image v-else-if="appType == 2" src="../../static/images/ic-problem111.png"></image>
						</view>
						<view class="item-text">常见问题</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="item" @click="goProblemList(2)">
					<view class="item-left">
						<view class="pic">
							<image v-if="appType == 0" src="../../static/images/ic-problem2.png"></image>
							<image v-else-if="appType == 1" src="../../static/images/ic-problem22.png"></image>
							<image v-else-if="appType == 2" src="../../static/images/ic-problem222.png"></image>
						</view>
						<view class="item-text">支付问题</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="item" @click="goProblemList(3)">
					<view class="item-left">
						<view class="pic">
							<image v-if="appType == 0" src="../../static/images/ic-problem3.png"></image>
							<image v-else-if="appType == 1" src="../../static/images/ic-problem33.png"></image>
							<image v-else-if="appType == 2" src="../../static/images/ic-problem333.png"></image>
						</view>
						<view class="item-text">订单问题</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="item" @click="goProblemList(4)">
					<view class="item-left">
						<view class="pic">
							<image v-if="appType == 0" src="../../static/images/ic-problem4.png"></image>
							<image v-else-if="appType == 1" src="../../static/images/ic-problem44.png"></image>
							<image v-else-if="appType == 2" src="../../static/images/ic-problem444.png"></image>
						</view>
						<view class="item-text">设备保障</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="item" @click="goFeedBack()">
					<view class="item-left">
						<view class="pic">
							<image v-if="appType == 0" src="../../static/images/ic-problem5.png"></image>
							<image v-else-if="appType == 1" src="../../static/images/ic-problem55.png"></image>
							<image v-else-if="appType == 2" src="../../static/images/ic-problem555.png"></image>
						</view>
						<view class="item-text">投诉建议</view>
					</view>
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>
		</view>
		
		<view class="hotline" @click="callPhone()">
			<view class="hotline-left">
				<view class="img">
					<image src="../../static/images/ic-kefu.png"></image>
				</view>
				<view class="content">
					<view class="left-text">平台热线客服</view>
					<view class="time">服务时间：周一至周日 09:00～22:00</view>
				</view>
			</view>
			<text class="iconfont icon-xiangyou"></text>
		</view>
		
		<callPhone ref="callPhone"></callPhone>
	</view>
	
</template>

<script>
	let app = getApp();
	import callPhone from '@/components/callPhone.vue'
	export default {
		components: {
			callPhone
		},
		data() {
			return {
				appType: app.globalData.appType,
			}
		},
		onLoad() {
			
		},
		methods: {
			goFeedBack() {
				uni.navigateTo({
					url: "/pages/columnGoods/HotNewGoods/feedback"
				})
			},
			callPhone(){
				
				let phone = ''
				if (this.appType == 1) {
					phone = '19012833586'
				} else {
					phone = '15822719988'
				}
				
				this.$refs.callPhone.openCall(phone)
			
			},
			goProblemList(type) {
				uni.navigateTo({
					url: "/pages/lease/problem-list?type=" + type
				})
			}
		}
	}
</script>

<style lang="scss">
	
	
	.service {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230520/039960ef6abbffeb32eda762f749ad54.png');
		background-repeat: no-repeat;
		width: 100%;
		height: 360rpx;
		background-color: #F5F7FA;
		padding: 0 24rpx;
		
		.header {
			padding: 56rpx 24rpx 32rpx 24rpx;
			
			.name {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			
			.problem {
				padding-top: 24rpx;
				font-size: 28rpx;
				color: rgba(255,255,255,0.72);
				line-height: 28rpx;
			}
		}
		
		.help-center {
			margin: 0 auto;
			padding: 0 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 2rpx solid #FAFAFA;
				
				.writing {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 32rpx;
				}
				
				.more {
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
					
					.icon-xiangyou {
						padding-left: 8rpx;
						font-size: 20rpx;
						transform: scale(0.8);
					}
				}
			}
			
			.list {
				
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 0;
					
					&~.item {
						border-top: 2rpx solid #FAFAFA;
					}
					
					.item-left {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.pic {
							width: 44rpx;
							height: 44rpx;
							margin-right: 24rpx;
							
							image {
								width: 100%;
								height: 100%;
							}
						}
						.item-text{
							font-size: 28rpx;
							color: #1F1F1F;
							line-height: 28rpx;
						}
					}
					
					.icon-xiangyou {
						color: #999999;
						transform: scale(0.8);
					}
				}
			}
		}
		
		.hotline {
			margin-top: 24rpx;
			padding: 32rpx 32rpx 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.hotline-left{
				display: flex;
				align-items: center;
				
				.img {
					margin-right: 16rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 80rpx;
					
					.left-text {
						font-size: 32rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 32rpx;
					}
					
					.time {
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
					}
				}
				
			}
			
			.icon-xiangyou {
				color: #999999;
				transform: scale(0.8);
			}
		}
	}
</style>